<template>
  <div>
    <div class="flex_wrap_between_middle tab-price">
      <ul class="monthly-nav">
        <li class="monthly-nav-item">
          <el-dropdown placement="bottom-start" @command="checkDepot">
            <el-button type="primary" class="monthly-nav-item-check-btn">
              {{ activeDepotName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="el-menu-box">
                <el-dropdown-item
                  v-for="(item, index) in depotList"
                  :key="index"
                  :command="item.value"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
        <li class="monthly-nav-item">
          <el-dropdown placement="bottom-start" @command="checkItem">
            <el-button type="primary" class="monthly-nav-item-check-btn">
              {{ activeName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="el-menu-box">
                <el-dropdown-item
                  v-for="(item, index) in financialOptions"
                  :key="index"
                  :command="item.code"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
        <li v-if="props.keyworld === 'consume'" class="monthly-nav-item">
          <el-dropdown placement="bottom-start" @command="checkConsumeItem">
            <el-button type="primary" class="monthly-nav-item-check-btn">
              {{ activeConsumeName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="all">全部</el-dropdown-item>
                <el-dropdown-item command="1">手术跟台</el-dropdown-item>
                <el-dropdown-item command="0">非手术跟台</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
        <li class="monthly-nav-item">
          <el-radio-group v-model="tabPosition" @change="changeRadio">
            <el-radio-button label="price">金额</el-radio-button>
            <el-radio-button label="useNumber">数量</el-radio-button>
          </el-radio-group>
        </li>
      </ul>
      <div class="date-list">
        <a
          v-for="(item, index) of dateList"
          :key="index"
          :class="dateValue === item.value ? 'slip-edit' : ''"
          @click.stop="clickDate(item.value)"
        >
          <p>{{ item.label }}</p>
        </a>
      </div>
    </div>

    <div class="layui-row">
      <div v-if="permission" class="layui-col-md12">
        <div :id="`rank${props.keyworld}`" style="height: 330px"></div>
      </div>
      <div v-else class="noPermiss">
        <NoPermiss :title="title"></NoPermiss>
      </div>
    </div>
  </div>
</template>

<script setup name="rankingList">
import * as echarts from "echarts";
import NoPermiss from "@/components/NoPermiss/index";
import { getDepotAll } from "@/api/core.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  keyworld: {
    type: String,
    default: "",
  },
  apiPrice: {
    type: Function,
    default: undefined,
  },
  apiQty: {
    type: Function,
    default: undefined,
  },
  text: {
    type: String,
    default: "",
  },
  permissionPrice: {
    type: Boolean,
    default: true,
  },
  permissionList: {
    type: Boolean,
    default: true,
  },
});

const depotList = ref([]);
const activeIndex = ref("all");
const activeName = ref("全部");
const activeDepotName = ref("全部");
const activeDepotId = ref("all");
const activeConsumeIndex = ref("all");
const activeConsumeName = ref("全部");
const title = ref("金额");
const permission = computed(() => {
  return props.permissionPrice;
});
const tabPosition = ref("price");
const dateList = reactive([
  { label: "一周", value: "week" },
  { label: "一个月", value: "month" },
  { label: "三个月", value: "months" },
  { label: "半年", value: "year" },
]);
const options = reactive({
  title: [
    {
      text: computed(() => {
        return props.text
      }),
      left: "25%",
      top: "20px",
      textAlign: "center",
      textStyle: {
        color: "#333333",
        fontWeight: "normal",
        fontSize: 14,
      },
    },
  ],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  color: ["#3db2ee"],
  yAxis: {
    type: "category",
    inverse: true,
  },
  xAxis: {
    name: "金额（元）",
    type: "value",
  },
  series: [
    {
      name: "金额",
      type: "bar",
      barWidth: "40%",
      smooth: true,
    },
  ],
  grid: {
    x: "25%",
    x2: "15%",
  },
});
const dateValue = ref("week");
const financialOptions = computed(() => {
  let options = proxy.$store.state.permission.dict["financial_account"] || [];
  let index = options.findIndex((item) => item.code === "all");
  if (index === -1) {
    options.unshift({ name: "全部", code: "all" });
  }
  return options;
});
onMounted(() => {
  getDepotList();
  if (props.permissionPrice) {
    getConsumeBarData();
  }
});

const clickDate = (value) => {
  dateValue.value = value;
  changeRadio(tabPosition.value);
};
function getConsumeBarData () {
  let params = {};
  if (props.keyworld === "consume") {
    params = {
      code: dateValue.value,
      type: activeIndex.value === "all" ? "" : activeIndex.value,
      top: 10,
      withOperateTable:
        activeConsumeIndex.value === "all" ? "" : activeConsumeIndex.value,
      depotId: activeDepotId.value === "all" ? "" : activeDepotId.value,
    };
  } else {
    params = {
      code: dateValue.value,
      type: activeIndex.value === "all" ? "" : activeIndex.value,
      top: 10,
      depotId: activeDepotId.value === "all" ? "" : activeDepotId.value,
    };
  }
  props.apiPrice(params).then((res) => {
    if (res) {
      options.yAxis.data = res.data.seriesData;
      options.series[0].data = res.data.xAxisData;
      options.xAxis.name = "金额（元）";
      let dom = document.getElementById(`rank${props.keyworld}`);
      let echart = echarts.getInstanceByDom(dom);
      console.log('rank',echart)
      if (echart === undefined || !echart) {
        echart = echarts.init(dom);
      }
      echart.setOption(options);
      window.addEventListener("resize", () => {
        echart.resize();
      });
    }
  });
};
function getDepotConsumeBarData () {
  let params = {};
  if (props.keyworld === "consume") {
    params = {
      code: dateValue.value,
      type: activeIndex.value === "all" ? "" : activeIndex.value,
      top: 10,
      withOperateTable:
        activeConsumeIndex.value === "all" ? "" : activeConsumeIndex.value,
      depotId: activeDepotId.value === "all" ? "" : activeDepotId.value,
    };
  } else {
    params = {
      code: dateValue.value,
      type: activeIndex.value === "all" ? "" : activeIndex.value,
      top: 10,
      depotId: activeDepotId.value === "all" ? "" : activeDepotId.value,
    };
  }
  props.apiQty(params).then((res) => {
    if (res) {
      options.yAxis.data = res.data.seriesData;
      options.series[0].data = res.data.xAxisData;
      options.xAxis.name = "数量";
      let dom = document.getElementById(`rank${props.keyworld}`);
      let echart = echarts.getInstanceByDom(dom);
      if (echart === undefined || !echart) {
        echart = echarts.init(dom);
      }
      echart.setOption(options);
      window.addEventListener("resize", () => {
        echart.resize();
      });
    }
  });
};
const changeRadio = (val) => {
  if (val === "price") {
    options.series[0].name = "金额";
    options.xAxis.name = "金额（元）";
    permission.value = props.permissionPrice;
    title.value = "金额";
    if (props.permissionPrice) {
      getConsumeBarData();
    }
  } else if (val === "useNumber") {
    options.series[0].name = "数量";
    options.xAxis.name = "数量";
    title.value = "数量";
    permission.value = props.permissionList;
    if (props.permissionList) {
      getDepotConsumeBarData();
    }
  }
};
const checkItem = (index) => {
  activeIndex.value = index;
  let obj = financialOptions.value.find((item) => item.code === index);
  activeName.value = obj.name;
  changeRadio(tabPosition.value);
};
const checkDepot = (str) => {
  activeDepotId.value = str;
  let obj = depotList.value.find((item) => item.value === str);
  activeDepotName.value = obj.name;
  changeRadio(tabPosition.value);
};
const checkConsumeItem = (index) => {
  activeConsumeIndex.value = index;
  switch (index) {
    case "all":
    activeConsumeName.value = "全部";
      break;
    case "1":
    activeConsumeName.value = "手术跟台";
      break;
    case "0":
    activeConsumeName.value = "非手术跟台";
      break;
    default:
    activeConsumeName.value = "";
      break;
  }
  changeRadio(tabPosition.value);
};
const getDepotList = () => {
  const params = {
    depotAuth: "id",
    status: "1",
  };
  getDepotAll(params).then((resp) => {
    if (resp && resp.success) {
      const data = resp.data;
      if (data.length) {
        depotList.value = data.map((item) => {
          return {
            name: item.name,
            value: item.id,
          };
        });
      }
      depotList.value.unshift({ name: "全部", value: "all" });
    }
  });
};
</script>

<style scoped lang="scss">
.tab-price .date-list {
  display: flex;
  font-size: 12px;
}
.tab-price .date-list p {
  padding: 3px 5px;
  cursor: pointer;
}
.el-menu-box {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
.noPermiss {
  width: 100%;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monthly-nav {
  display: flex;
  align-items: center;
  .monthly-nav-item {
    padding-right: 12px;
    .el-icon-arrow-down {
      font-size: 14px;
    }
    .monthly-nav-item-check-btn {
      //background-color: #6dc1a9;
      color: #ffffff;
    }
  }
}
</style>
